<template>
	<view>
		<view style="margin: 20px 41.5px;background: #F6F6F6;padding: 0px 60px;
			border-radius: 32px;">
			<u-search :show-action="true" searchIcon="/static/images/searc.png" placeholder="搜索你想要的店铺"
				placeholderColor="#CDCDCD" bgColor="#F6F6F6" v-model="q" :animation="true" @search="getShoplist()">
			</u-search>

		</view>
		<view>
			<u-tabs :list="list4" lineWidth="40" lineHeight="10" lineColor="rgba(45, 226, 154, 0.3)"
				:activeStyle="activeStyle" :inactiveStyle="inactiveStyle" :current="current" @click="click"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 28px;font-size:25px;"
				style="margin-bottom: 10px;">
			</u-tabs>
			<view
				style="margin:0px 10px 10px 10px;height: 1100rpx;overflow: hidden;overflow-y: scroll;border-top: 1px solid #DCDCDC;">
				<block v-for="item in shoplist">
					<view style="display:flex;margin: ;border-bottom:1px solid #DCDCDC; padding: 10px 0;"
						@click="shopDetail(item.id)">
						<view style="flex:1;border-radius:5px">
							<image style="width: 164rpx;height: 164rpx;" :src="item.logo"></image>
						</view>
						<view style="flex:3;margin-left: 15px;">
							<view style="color:#000000;font-size: 32rpx;line-height: 68.8rpx;font-weight: 400">
								{{item.shop_name}}</view>
							<view style="font-size: 22rpx;line-height: 60rpx">{{item.label}}</view>
							<view style="font-size: 22rpx;display: flex;">
								<view class="icon_text">惠</view>
								{{item.discount}}
							</view>
						</view>
						<view
							style="flex:1;justify-content: center;align-items: center;display: flex;font-size: 24rpx;color: #808080;">
							{{item.distance}}
						</view>
					</view>
				</block>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		postNewsDetail,
		shopcategory,
		shoplist
	} from "../../api/home.js";
	import {
		url
	} from "../../utils/url.js";
	import {
		wechatConfig
	} from '../../api/public.js';
	export default {
		data() {
			return {
				text: 20,
				current: 0,
				activeStyle: {
					color: '#000000',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#808080',
					transform: 'scale(1)'
				},
				q: "",
				cate_id: "",
				lng: "",
				lat: "",
				newDetail: {}, // 咨询详情
				list4: [],
				shoplist: []
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			async init() {
				this.initFunction()
				uni.setNavigationBarTitle({
					title: '全部分类'
				});
			},
			async initFunction(id) {
				var res = await shopcategory();

				if (res.data.code == 1) {
					let newDetail = res.data.data;
					console.log(newDetail);
					for (let i in newDetail) {
						newDetail[i].name = newDetail[i].title
					}
					this.list4 = newDetail;
					this.cate_id = this.list4[0].id;
					this.getUserlocation()
				}
			},
			
			async getShoplist() {
				uni.showLoading({
					title: "加载中"
				})
				this.shoplist =[];
				var data = {
					cate_id: this.cate_id,
					q: this.q,
					 lat: this.lat,
					lng: this.lng,
				}
				var res = await shoplist(data);
				uni.hideLoading()
				//alert(JSON.stringify(data));	
				if (res.data.code == 1) {
					let newDetail = res.data.data;
					console.log(newDetail);
					this.shoplist = newDetail

				}
			},

			shopDetail(id) {
				uni.navigateTo({
					url: "/pages/home/shopDetail?id=" + id
				})
			},
			click(detail) {
				console.log(detail);
				this.current = detail.index
				this.cate_id = detail.id;
				this.q = "";
				this.getShoplist();
			},
			getConfig() {
				var data = {
					url: encodeURIComponent(location.href.split('#')[0])
				}
				wechatConfig(data).then(res => {
					//alert("getConfig"+JSON.stringify(res));
					this.initJsdk(res.data.data)
				})
			},
			initJsdk(config) {
				//alert("initJsdk"+JSON.stringify(config));  
				this.$wx.config({
					debug: false, // 开启调试模式
					appId: config.appId, // 必填，公众号的唯一标识
					timestamp: config.timestamp, // 必填，生成签名的时间戳
					nonceStr: config.nonceStr, // 必填，生成签名的随机串
					signature: config.signature, // 必填，签名，见附录1
					jsApiList: config.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				})
				this.$wx.ready(function() {
					this.$wx.checkJsApi({
						jsApiList: ['openLocation'],
					})
				})
				this.$wx.error(function(res) {});

			},
			getUserlocation() {
				const that = this;
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: function(res) {
						console.log(res);
						that.lat = res.latitude;
						that.lng = res.longitude
						that.getShoplist();
					},complete() {
						 // that.initFunction()
					},
				});
				
				// this.$wx.getLocation({
				// 	type: 'gcj02',
				// 	altitude: true,
				// 	isHighAccuracy: true,
				// 	success(res) {
				// 		//alert("地址获取"+JSON.stringify(res))
				// 		that.lat = res.latitude;
				// 		that.lng = res.longitude
				// 		that.getShoplist();
				// 	},
				// 	complete() {
				// 		 that.init()
				// 	},
				// 	fail(e) {
				// 		//alert("地址获取失败"+JSON.stringify(e))
				// 	}
				// })
			},
			qqMapToBMap(lng, lat) {
			    if (lng == null || lng == '' || lat == null || lat == '')
			        return [lng, lat];
			    var x_pi = 3.14159265358979324;
			    var x = parseFloat(lng);
			    var y = parseFloat(lat);
			    var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
			    var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
			    var lng = (z * Math.cos(theta) + 0.0065).toFixed(5);
			    var lat = (z * Math.sin(theta) + 0.006).toFixed(5);
				return {lng: lng, lat: lat}
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	.icon_text {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
		color: white;
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		background: #F5750A;
		font-size: 10px;
		border-radius: 4px;
		text-align: center;
	}

	.u-tabs__wrapper__nav__line {
		left: -15px !important;
		border-radius: 0px !important;
	}

	.u-icon__img {
		width: 15px !important;
		height: 15px !important;
	}
</style>
